<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="dialogFormVisible = true">添加</el-button>
    <el-button type="primary" size="mini" icon="el-icon-check" @click="showTreeDialog">授权</el-button>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                @row-click="rowClick">
            <el-table-column
                    width="180">
                <template slot-scope="scope">
                    <el-checkbox v-model="currentId == scope.row.id"></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column
                    label="编号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="角色名"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.roleName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="角色描述"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.roleDescribe }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="page">
    </el-pagination>
    <el-dialog title="角色管理" :visible.sync="dialogFormVisible" @close="closeFormDialog">
        <el-form :model="form">
            <el-form-item label="角色名称" >
                <el-input v-model="form.roleName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" >
                <el-input v-model="form.roleDescribe" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="角色授权" :visible.sync="dialogTreeVisible"
               @close="closeTreeDialog">
        <el-tree
                :data="treeData"
                show-checkbox
                default-expand-all
                accordion
                node-key="id"
                ref="tree"
                @check-change="checkChange"
                check-strictly="true"
                highlight-current>
        </el-tree>
        <div slot="footer">
            <el-button @click="dialogTreeVisible = false">关闭</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="/vue/vue.js"></script>
<script src="/elementui/index.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                tableData: [],
                total:0,
                dialogFormVisible:false,
                dialogTreeVisible:false,   //授权对话框的显示
                form:{roleId:"",roleName:"",roleDescribe:""},
                currentId:"",               //当前行的id
                treeData:[
                    {id:1,label:"菜单1",children:[{id:101,label:"菜单1-1"},{id:102,label:"菜单1-2"}]},
                    {id:2,label:"菜单2",children:[{id:201,label:"菜单2-1"},{id:202,label:"菜单2-2"}]}
                ],
                change:false                //标识权限是否能修改
            }
        },
        methods: {
            //显示更新窗体
            handleEdit(index, row) {
                // console.log(index, row);
                //给form赋值
                this.form = row;
                //显示对话框
                this.dialogFormVisible = true;
            },
            //删除
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/role/"+row.id)
                        .then(res=>{
                            if(res.data.code == 1){
                                this.$message("删除成功");
                                this.loadRole(1);
                            }
                        });
                });
                // console.log(index, row);
            },
            //分页
            loadRole(page){
                axios.get("/role/page/"+page)
                    .then(res => {
                       if(res.data.code == 1){
                           this.tableData = res.data.data.records;
                           this.total = res.data.data.total;
                       }
                    });
            },
            //点击确定，完成更新或添加
            saveOrUpdate(){
                if(this.form.roleId == ""){
                    axios.post("/role",this.form)
                        .then(res => {
                           if(res.data.code == 1){
                               this.$message("添加成功");
                               this.loadRole(1);
                           }
                        });
                }else{
                    axios.put("/role",this.form)
                        .then(res => {
                            if(res.data.code == 1){
                                this.$message("更新成功");
                                this.loadRole(1);
                            }
                        });
                }
                this.dialogFormVisible = false;
            },
            //分页
            page(page){
                this.loadRole(page);
            },
            //关闭对话框回调
            closeFormDialog(){
                this.form = {roleId:"",roleName:"",roleDescribe:""};
            },
            //点击表格行的事件
            rowClick(row, column, event){
                this.currentId = row.id;
                console.log("row-id:" + this.currentId);
            },
            //打开授权对话框
            showTreeDialog(){
                if(this.currentId == ""){
                    this.$message("请选择一个角色");
                    return;
                }
                // 获得角色所有的权限
                axios.get("/menu/findRoleMenuIds?roleId="+this.currentId)
                    .then(res =>{
                        if(res.data.code == 1){
                            this.$refs.tree.setCheckedKeys(res.data.data);
                            //延迟执行代码,等树完成选中状态渲染后，再修改
                            setTimeout(() => {this.change = true;},500);
                        }
                    });
                this.dialogTreeVisible = true;
            },
            //关闭树对话框后，让权限不能修改
            closeTreeDialog(){
              this.change = false;
            },
            //树节点是否选中
            checkChange(row,checked,childChecked){
                if(this.change){
                    console.log(row.id+"----"+checked);
                    if(checked){
                        //添加中间表角色和权限
                        axios.post("/role/"+this.currentId+"/"+row.id)
                            .then(res=>{
                               if(res.data.code == 1){
                                   this.$message("添加权限成功！");
                               }
                            });
                    }else{
                        //删除中间表角色和权限
                        axios.delete("/role/"+this.currentId+"/"+row.id)
                            .then(res=>{
                                if(res.data.code == 1){
                                    this.$message("删除权限成功！");
                                }
                            });
                    }
                }
            }
        },
        //页面加载
        mounted(){
            this.loadRole(1);
            //获得所有权限
            axios.get("/menu/findMenuTrees")
                .then(res => {
                    if(res.data.code == 1){
                        this.treeData = res.data.data;
                    }
                });
        }
    });
</script>
</html>